async function fn() {
    let types;
    let movies;

    await $.ajax({
        url: "https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllTypes",
        success: function (data) {
            types = data.types;
        }
    })

    await $.ajax({
        url: "https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllMovies",
        success: function (data) {
            movies = data.movies
        }
    })
    //tab切换
    $('.box').on('click', 'button', function () {
        if ($(this).html() == "正在上映") {
            $(this).attr('class', "open");
            $(this).next().attr('class', "");
            $('.movies1').css({ 'display': "block" });
            $('.movies2').css({ 'display': "none" });
        } else {
            $(this).attr('class', "open");
            $(this).prev().attr('class', "");
            $('.movies2').css({ 'display': "block" });
            $('.movies1').css({ 'display': "none" });
        }
    })
    //数据加载
    var id
    movies.forEach(function (v, i) {
        if (i < 10) {
            id = v.movieType;
            var str = [];
            for (var i = 0; i < id.length; i++) {
                for (var j = 0; j < types.length; j++) {
                    if (types[j].id == id[i]) {
                        str.push(types[j].name);
                    }
                }
            }
            str = str.join(" ");
            var newdiv = $('<div class="movieCard"></div>');
            newdiv.html(
                `<div class="photo">
                    <img src="${v.imgSrc}">
                </div>
                    <p>${v.title}</p>
                <div class="title">
                    <span>类型</span>
                    <strong>${str}</strong>
                </div>
                <div class="title">
                    <span>片长</span><strong>${v.duration}</strong>
                </div>
                <div class="title">
                    <span>评分</span><strong>${v.score}</strong>
                </div>
                <button>立即购票</button>`)
            $('.movies1').append(newdiv)
        } else {
            id = v.movieType;
            var str = [];
            for (var i = 0; i < id.length; i++) {
                for (var j = 0; j < types.length; j++) {
                    if (types[j].id == id[i]) {
                        str.push(types[j].name);
                    }
                }
            }
            str = str.join(" ");
            var newdiv = $('<div class="movieCard"></div>');
            newdiv.html(`<div class="photo"><img src="${v.imgSrc}">
                </div><p>${v.title}</p><div class="title">
                <span>类型</span><strong>${str}</strong>
                </div><div class="title">
                <span>片长</span><strong>${v.duration}</strong>
                </div>
                <div class="title">
                <span>评分</span><strong>${v.score}</strong>
                </div>
                <button>立即购票</button>`)
            $('.movies2').append(newdiv)
        }

        $(".movieCard").on('click','button',function(){
            $(this).css({
                "background": "blue",
                "color": "#fff" 
            });
            location.assign(`../html/Seatse.html${location.search}id=${v.id}`)
        });
    });

    if (location.search.substr(1) == "moviehot") {
        $(".box button:first-child").attr('class', "open");
        $(".box button:first-child").next().attr('class', "");
        $('.movies1').css({ 'display': "block" });
        $('.movies2').css({ 'display': "none" });
    } else {
        $(".box button:last-child").attr('class', "open");
        $(".box button:last-child").prev().attr('class', "");
        $('.movies2').css({ 'display': "block" });
        $('.movies1').css({ 'display': "none" });
    }
    
    // 回退
    $("header").on('click','a',function() {
        history.go(-1);
    });

}
fn();